การจัดการอีเวนต์ CSS Custom Highlight: ยกระดับประสบการณ์การโต้ตอบเมื่อเลือกข้อความ

การเลือกข้อความเป็นปฏิสัมพันธ์พื้นฐานบนเว็บ ผู้ใช้ไฮไลต์ข้อความด้วยเหตุผลหลายประการ เช่น คัดลอกเนื้อหา แชร์คำพูด ค้นหา หรือเพียงแค่ต้องการโฟกัส ในขณะที่เบราว์เซอร์มีการไฮไลต์ข้อความพื้นฐานมาให้ CSS Custom Highlight API ก็มอบการควบคุมที่เหนือกว่า ช่วยให้นักพัฒนาสามารถสร้างประสบการณ์การเลือกข้อความที่สวยงาม สอดคล้องกับบริบท และเข้าถึงได้ง่าย บล็อกโพสต์นี้จะเจาะลึกถึง CSS Custom Highlight API สำรวจความสามารถของมัน และให้ตัวอย่างที่ใช้งานได้จริงเพื่อปรับปรุงเว็บแอปพลิเคชันของคุณ

ทำความเข้าใจพฤติกรรมการเลือกข้อความพื้นฐาน

โดยปกติแล้ว เบราว์เซอร์จะจัดสไตล์ข้อความที่ถูกเลือกโดยใช้ pseudo-element ::selection คุณสามารถเปลี่ยนคุณสมบัติ background-color และ color เพื่อปรับเปลี่ยนลักษณะที่ปรากฏได้ ตัวอย่างเช่น:

            ::selection {
  background-color: #b3d4fc;
  color: #000;
}

            

              
                Copy
              
            
          

โค้ด CSS สั้นๆ นี้จะเปลี่ยนสีพื้นหลังเป็นสีฟ้าอ่อนและสีข้อความเป็นสีดำทุกครั้งที่ผู้ใช้เลือกข้อความบนหน้าเว็บ อย่างไรก็ตาม pseudo-element ::selection มีข้อจำกัด มันอนุญาตให้จัดสไตล์ได้แค่พื้นหลังและสีเท่านั้น ซึ่งเป็นการจำกัดการปรับแต่ง นอกจากนี้ยังขาดข้อมูลเชิงความหมายเกี่ยวกับบริบทของการเลือก CSS Custom Highlight API ได้เข้ามาแก้ไขข้อจำกัดเหล่านี้

แนะนำ CSS Custom Highlight API

CSS Custom Highlight API นำเสนอแนวทางที่แข็งแกร่งและยืดหยุ่นกว่าในการจัดการการเลือกข้อความ โดยมีการแนะนำคุณสมบัติ CSS และ JavaScript API ใหม่ๆ ที่ช่วยให้คุณสามารถกำหนดและจัดสไตล์ไฮไลต์แบบกำหนดเองตามเงื่อนไขและการโต้ตอบที่เฉพาะเจาะจงได้

แนวคิดหลัก

• การสืบทอดไฮไลต์ (Highlight Inheritance): ไฮไลต์จะถูกจัดสไตล์ผ่านกลไกการสืบทอด (cascade and inheritance) คล้ายกับคุณสมบัติ CSS อื่นๆ ซึ่งหมายความว่าคุณสามารถกำหนดสไตล์ไฮไลต์เริ่มต้นที่ระดับราก (root level) และเขียนทับ (override) สำหรับองค์ประกอบหรือบริบทที่เฉพาะเจาะจงได้
• Highlight Pseudo: pseudo-element ::highlight() ใช้เพื่อใช้สไตล์กับไฮไลต์ที่มีชื่อ
• JavaScript API: JavaScript API เช่น getSelection() และอ็อบเจกต์ Highlight ช่วยให้คุณสามารถสร้าง จัดการ และโต้ตอบกับไฮไลต์ผ่านโปรแกรมได้
• การเข้าถึงได้ (Accessibility): API นี้รองรับแอตทริบิวต์ ARIA และข้อควรพิจารณาด้านการเข้าถึงได้ เพื่อให้แน่ใจว่าผู้ใช้ที่มีความพิการสามารถรับรู้และเข้าใจไฮไลต์แบบกำหนดเองได้

การสร้างไฮไลต์แบบกำหนดเอง: คำแนะนำทีละขั้นตอน

นี่คือคำแนะนำเชิงปฏิบัติสำหรับการสร้างไฮไลต์แบบกำหนดเองโดยใช้ CSS Custom Highlight API:

ขั้นตอนที่ 1: การกำหนดไฮไลต์ที่มีชื่อ

ขั้นแรก คุณต้องกำหนดไฮไลต์ที่มีชื่อโดยใช้ CSS ชื่อนี้จะถูกใช้เพื่อเชื่อมโยงสไตล์กับการเลือกที่เฉพาะเจาะจง

            ::highlight(custom-highlight) {
  background-color: rgba(255, 0, 0, 0.3);
  color: #000;
}

            

              
                Copy
              
            
          

ในตัวอย่างนี้ เราได้กำหนดไฮไลต์ชื่อ `custom-highlight` ที่มีพื้นหลังสีแดงโปร่งแสงและสีข้อความเป็นสีดำ คุณสามารถเลือกค่าสี CSS ที่ถูกต้องสำหรับพื้นหลังและข้อความได้

ขั้นตอนที่ 2: การสร้างไฮไลต์ใน JavaScript

ถัดไป ใช้ JavaScript เพื่อสร้างและใช้ไฮไลต์ ซึ่งเกี่ยวข้องกับการรับช่วงข้อความที่เลือกและสร้างอ็อบเจกต์ Highlight

            function applyCustomHighlight() {
  const selection = window.getSelection();
  if (!selection.rangeCount) {
    return; // No selection
  }

  const range = selection.getRangeAt(0);
  if (range.collapsed) {
    return; // Empty selection
  }

  const highlight = new Highlight(range);

  // Register the highlight with the document. It's experimental and may need polyfill or browser flag
  if (typeof CSS !== 'undefined' && typeof CSS.highlights !== 'undefined') {
    CSS.highlights.set('custom-highlight', highlight);
  } else {
    console.warn('CSS.highlights is not supported. Consider using a polyfill.');
    // Implement a fallback mechanism here, e.g., wrapping the selected text in a  with a class
    // For example:
    const span = document.createElement('span');
    span.classList.add('fallback-custom-highlight');
    span.style.backgroundColor = 'rgba(255, 0, 0, 0.3)';
    span.style.color = '#000';
    range.surroundContents(span);
  }

  selection.removeAllRanges(); // Optional: Clear the selection after highlighting
}

            

              
                Copy
              
            
          

คำอธิบาย:

• window.getSelection(): ดึงอ็อบเจกต์การเลือกปัจจุบัน
• selection.rangeCount: ตรวจสอบว่ามีการเลือกที่ใช้งานอยู่หรือไม่
• selection.getRangeAt(0): รับช่วงที่เลือก
• new Highlight(range): สร้างอ็อบเจกต์ Highlight ใหม่จากช่วงที่เลือก
• CSS.highlights.set('custom-highlight', highlight): ลงทะเบียนไฮไลต์กับ CSS highlight registry นี่เป็นขั้นตอนสำคัญที่เชื่อมโยงไฮไลต์จาก JavaScript กับสไตล์ CSS ที่กำหนดไว้ก่อนหน้านี้
• กลไกสำรอง (Fallback Mechanism): รวมถึงกลไกสำรองที่สำคัญสำหรับเบราว์เซอร์ที่ยังไม่รองรับ CSS.highlights อย่างสมบูรณ์ เพื่อให้แน่ใจว่าฟีเจอร์ของคุณจะลดระดับการทำงานลงอย่างเหมาะสม (degrades gracefully) และยังคงใช้งานได้ในเบราว์เซอร์รุ่นเก่า
• selection.removeAllRanges(): ล้างการเลือกหลังจากไฮไลต์ ซึ่งเป็นทางเลือกและขึ้นอยู่กับประสบการณ์ผู้ใช้ที่คุณต้องการ

อย่าลืมแนบฟังก์ชันนี้กับ event listener เช่น การคลิกปุ่มหรือแป้นพิมพ์ลัด

ขั้นตอนที่ 3: การจัดการหลายช่วง (การเลือกที่ซ้อนกัน)

API นี้สามารถจัดการช่วงที่ซ้อนกันหลายช่วงภายในไฮไลต์เดียวได้ คุณสามารถเพิ่มหลายช่วงลงในอ็อบเจกต์ Highlight:

            const highlight = new Highlight();
highlight.add(range1);
highlight.add(range2);

if (typeof CSS !== 'undefined' && typeof CSS.highlights !== 'undefined') {
  CSS.highlights.set('custom-highlight', highlight);
} else {
  console.warn('CSS.highlights is not supported. Consider using a polyfill.');
  // Implement a fallback for multiple ranges (more complex)
  // This would require splitting the text into smaller spans and applying styles
  // This is a more advanced fallback implementation and may not be suitable for all cases
}

            

              
                Copy
              
            
          

สไตล์จะถูกนำไปใช้กับทุกช่วงภายในไฮไลต์นั้น

กรณีการใช้งานและเทคนิคขั้นสูง

CSS Custom Highlight API เปิดโอกาสมากมายสำหรับการปรับปรุงการโต้ตอบกับการเลือกข้อความ นี่คือกรณีการใช้งานและเทคนิคขั้นสูงบางส่วน:

1. การไฮไลต์ตามบริบท (Context-Aware Highlighting)

คุณสามารถใช้ JavaScript เพื่อวิเคราะห์ข้อความที่เลือกและใช้สไตล์ไฮไลต์ที่แตกต่างกันตามเนื้อหาหรือบริบทโดยรอบได้ ตัวอย่างเช่น คุณสามารถไฮไลต์คำสำคัญในเอกสารด้วยสีที่เฉพาะเจาะจง หรือระบุและไฮไลต์โค้ดตัวอย่าง

            function applyContextualHighlight() {
  const selection = window.getSelection();
  if (!selection.rangeCount) return;

  const range = selection.getRangeAt(0);
  const selectedText = range.toString();

  let highlightName = 'default-highlight';

  if (selectedText.startsWith('//')) {
    highlightName = 'comment-highlight'; // Highlight code comments
  } else if (selectedText.match(/\b(function|class|const|let)\b/)) {
    highlightName = 'keyword-highlight'; // Highlight JavaScript keywords
  }

  const highlight = new Highlight(range);

  if (typeof CSS !== 'undefined' && typeof CSS.highlights !== 'undefined') {
    CSS.highlights.set(highlightName, highlight);
  } else {
    console.warn('CSS.highlights is not supported. Consider using a polyfill.');
    // Fallback implementation, potentially using data attributes and custom CSS
    const span = document.createElement('span');
    span.classList.add('fallback-highlight');
    span.dataset.highlightType = highlightName;
    range.surroundContents(span);
  }

  selection.removeAllRanges();
}

            

              
                Copy
              
            
          

กำหนดสไตล์ CSS สำหรับไฮไลต์แต่ละประเภท:

            ::highlight(comment-highlight) {
  background-color: rgba(0, 255, 0, 0.2);
  color: #555;
}

::highlight(keyword-highlight) {
  background-color: rgba(255, 255, 0, 0.2);
  color: #000;
}

.fallback-highlight[data-highlight-type="comment-highlight"] {
  background-color: rgba(0, 255, 0, 0.2);
  color: #555;
}

.fallback-highlight[data-highlight-type="keyword-highlight"] {
  background-color: rgba(255, 255, 0, 0.2);
  color: #000;
}

            

              
                Copy
              
            
          

2. การไฮไลต์ผลการค้นหา

คุณสามารถใช้ API นี้เพื่อไฮไลต์คำค้นหาภายในเอกสารได้ ซึ่งมีประโยชน์อย่างยิ่งสำหรับหน้าผลการค้นหาหรือฟังก์ชันการค้นหาภายในแอปพลิเคชัน

            function highlightSearchResults(searchTerm) {
  const text = document.body.innerText; // Or specific element
  const regex = new RegExp(searchTerm, 'gi'); // Global, case-insensitive

  let match;
  while ((match = regex.exec(text)) !== null) {
    const start = match.index;
    const end = start + searchTerm.length;

    // Create a range for each match
    const range = document.createRange();
    range.setStart(document.body.firstChild, start);
    range.setEnd(document.body.firstChild, end);

    const highlight = new Highlight(range);

    if (typeof CSS !== 'undefined' && typeof CSS.highlights !== 'undefined') {
      CSS.highlights.set('search-result-highlight', highlight);
    } else {
      console.warn('CSS.highlights is not supported. Consider using a polyfill.');
      // Fallback, again, requires careful handling of text nodes
    }
  }
}

            

              
                Copy
              
            
          

กำหนดสไตล์ CSS สำหรับไฮไลต์ผลการค้นหา:

            ::highlight(search-result-highlight) {
  background-color: yellow;
  color: black;
}

            

              
                Copy
              
            
          

3. การผสานรวมกับ Shadow DOM

CSS Custom Highlight API ทำงานร่วมกับ Shadow DOM ได้อย่างราบรื่น ช่วยให้คุณสร้างคอมโพเนนต์ที่ห่อหุ้ม (encapsulated) พร้อมสไตล์ไฮไลต์แบบกำหนดเองได้ คุณสามารถกำหนดไฮไลต์ภายใน Shadow DOM และนำไปใช้กับองค์ประกอบภายในคอมโพเนนต์นั้นได้

4. ข้อควรพิจารณาด้านการเข้าถึงได้ (Accessibility)

ตรวจสอบให้แน่ใจว่าไฮไลต์แบบกำหนดเองของคุณสามารถเข้าถึงได้โดยผู้ใช้ทุกคน พิจารณาสิ่งต่อไปนี้:

• ความคมชัดของสี (Color Contrast): ตรวจสอบให้แน่ใจว่ามีความคมชัดของสีที่เพียงพอระหว่างพื้นหลังของไฮไลต์และสีข้อความเพื่อให้เป็นไปตามแนวทางของ WCAG
• การนำทางด้วยแป้นพิมพ์ (Keyboard Navigation): ตรวจสอบให้แน่ใจว่าผู้ใช้สามารถนำทางไปยังข้อความที่ไฮไลต์โดยใช้แป้นพิมพ์ได้
• ความเข้ากันได้กับโปรแกรมอ่านหน้าจอ (Screen Reader Compatibility): ทดสอบไฮไลต์ของคุณกับโปรแกรมอ่านหน้าจอเพื่อให้แน่ใจว่าข้อความที่เลือกจะถูกประกาศอย่างถูกต้อง
• ตัวบ่งชี้โฟกัส (Focus Indicators): เมื่อองค์ประกอบที่ไฮไลต์ได้รับโฟกัส ให้มีตัวบ่งชี้โฟกัสที่มองเห็นได้ชัดเจน

คุณสามารถใช้แอตทริบิวต์ ARIA เพื่อให้ข้อมูลเชิงความหมายเพิ่มเติมเกี่ยวกับไฮไลต์ได้ ตัวอย่างเช่น คุณสามารถใช้ aria-label เพื่ออธิบายวัตถุประสงค์ของส่วนที่ไฮไลต์

5. การแปลและการปรับให้เข้ากับสากล (Localization and Internationalization)

เมื่อต้องจัดการกับการเลือกข้อความในบริบทสากล ให้พิจารณาสิ่งต่อไปนี้:

• ทิศทางของข้อความ (Text Direction): ตรวจสอบให้แน่ใจว่าไฮไลต์ของคุณทำงานอย่างถูกต้องกับทิศทางของข้อความทั้งจากซ้ายไปขวา (LTR) และจากขวาไปซ้าย (RTL)
• กฎเฉพาะภาษา (Language-Specific Rules): ตระหนักถึงกฎเฉพาะภาษาสำหรับการเลือกข้อความและขอบเขตของคำ
• การรองรับแบบอักษร (Font Support): ใช้แบบอักษรที่รองรับอักขระที่ใช้ในภาษาต่างๆ

6. การเพิ่มประสิทธิภาพ (Performance Optimization)

การใช้ไฮไลต์แบบกำหนดเองอาจส่งผลต่อประสิทธิภาพ โดยเฉพาะในเอกสารขนาดใหญ่ พิจารณาเทคนิคการเพิ่มประสิทธิภาพต่อไปนี้:

• Debouncing: ใช้ Debounce กับฟังก์ชันไฮไลต์เพื่อหลีกเลี่ยงการคำนวณที่มากเกินไปในระหว่างการเลือกอย่างรวดเร็ว
• การแคช (Caching): แคชช่วงไฮไลต์ที่คำนวณแล้วเพื่อหลีกเลี่ยงการคำนวณซ้ำโดยไม่จำเป็น
• Virtualization: ใช้เทคนิค Virtualization เพื่อแสดงผลเฉพาะไฮไลต์ที่มองเห็นได้ใน viewport ปัจจุบันเท่านั้น
• Web Workers: ย้ายการคำนวณไฮไลต์ไปยัง Web Worker เพื่อหลีกเลี่ยงการบล็อกเธรดหลัก

การรองรับของเบราว์เซอร์และ Polyfills

CSS Custom Highlight API ค่อนข้างใหม่และอาจยังไม่ได้รับการรองรับอย่างสมบูรณ์จากทุกเบราว์เซอร์ ตรวจสอบตารางความเข้ากันได้ของเบราว์เซอร์ล่าสุดก่อนนำไปใช้ในโปรดักชัน พิจารณาใช้ polyfill เพื่อให้การสนับสนุนสำหรับเบราว์เซอร์รุ่นเก่า polyfill จะเพิ่มโค้ดที่จำเป็นสำหรับเบราว์เซอร์รุ่นเก่าเพื่อให้เข้าใจ API ใหม่ได้ ค้นหา "CSS Custom Highlight API Polyfill" ออนไลน์เพื่อค้นหาตัวเลือกต่างๆ

สรุป

CSS Custom Highlight API ช่วยให้นักพัฒนาสามารถสร้างประสบการณ์การเลือกข้อความที่น่าสนใจ สอดคล้องกับบริบท และเข้าถึงได้ง่าย ด้วยความเข้าใจในความสามารถของ API และการใช้เทคนิคที่อธิบายไว้ในบล็อกโพสต์นี้ คุณสามารถยกระดับประสบการณ์ผู้ใช้ของเว็บแอปพลิเคชันของคุณ และมอบวิธีที่ใช้งานง่ายและสวยงามยิ่งขึ้นให้ผู้ใช้โต้ตอบกับข้อความได้ อย่าลืมให้ความสำคัญกับการเข้าถึงได้และประสิทธิภาพเมื่อสร้างไฮไลต์แบบกำหนดเอง และพิจารณาความเข้ากันได้ของเบราว์เซอร์และตัวเลือก polyfill การควบคุมการเลือกข้อความที่ละเอียดอ่อนนี้ช่วยให้นักพัฒนาสามารถสร้างประสบการณ์เว็บที่โต้ตอบได้และเป็นมิตรกับผู้ใช้มากขึ้น ซึ่งปรับให้เข้ากับความต้องการของแอปพลิเคชันและความพึงพอใจของผู้ใช้โดยเฉพาะ ในขณะที่การรองรับของเบราว์เซอร์เติบโตขึ้น CSS Custom Highlight API ก็มีแนวโน้มที่จะกลายเป็นเครื่องมือที่ขาดไม่ได้สำหรับการพัฒนาเว็บสมัยใหม่

สำรวจเพิ่มเติม

• MDN Web Docs: Highlight API
• CSS Houdini: เรียนรู้เพิ่มเติมเกี่ยวกับโครงการ CSS Houdini ที่ทำให้ฟีเจอร์ CSS ขั้นสูงเหล่านี้เป็นไปได้